<template>
  <TopNavComponent/>
  <SwiperComponent :images="images"/>
  <ShopNavView/>
  <div class="ad">
    <div class="ad-one">
      <img src="@/assets/images/ad-1.jpg" alt="">
    </div>
    <div class="ad-tow">
      <img src="@/assets/images/ad-2.jpg" alt="">
    </div>
  </div>
  <ShopSeckilView/>
  <div class="suit">
    <img src="@/assets/images/t1.jpg" alt="">
  </div>
  <RollComponent :roll-info="suit">
    <div class="suit-content">
      <div class="suit-item" v-for="(item,index) in suitList" :key="index">
        <img :src="item.image" alt="">
        <p>{{item.title}}</p>
        <span>{{item.price}}</span>
      </div>
    </div>
  </RollComponent>
  <div class="discount">
    <h3>特惠专题</h3>
    <img src="@/assets/images/d1.png" alt="">
    <img src="@/assets/images/d2.jpg" alt="">
  </div>
  <CardComponent :cardData="singleGoods" recommendTitle="单品推荐"/>
</template>

<script setup lang="ts">
import TopNavComponent from "@/components/TopNavComponent.vue";
import SwiperComponent from "@/components/SwiperComponent.vue";
import {getCarousel,getRecommend} from "@/api/Home/home";
import {getSuit} from "@/api/shop/shop.ts";
import {onMounted, reactive, ref} from "vue";
import ShopNavView from "@/views/ShopView/ShopNavView.vue";
import ShopSeckilView from "@/views/ShopView/ShopSeckilView.vue";
import RollComponent from "@/components/RollComponent.vue";
import CardComponent from "@/components/CardComponent.vue";
interface IImage {
  image: string,
  title: string,
  url: string
}
const images = ref<IImage[]>([])
const suit=reactive({
  title:'精选套装',
  all:'查看全部'
})
interface IsuitList{
  image:string,
  title:string,
  price:number,
}
interface IRecommend{
  id:number,
  image:any,
  title:string,
  price:number,
}
const singleGoods=ref<IRecommend[]>([])
const suitList=ref<IsuitList[]>([])
onMounted(async ()=>{
  const res = await getCarousel()
  images.value = res.data
  const suitListData = await getSuit()
  if(suitListData.status===200){
    suitList.value = suitListData.data
  }
  const recommend = await getRecommend()
  if(recommend.status===200){
    singleGoods.value = recommend.data
  }
})
</script>

<style scoped lang="less">
.ad{
  width: 100%;
  height: 100px;
  display: flex;
  margin: 10px 0;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
  .ad-one{
    img{
      width:100%;
    }
  }
  .ad-tow{
    img{
      width:100%;
    }
  }
}
.suit{
  img{
    width: 100%;
  }
}
.suit-content{
  display:flex;
  padding: 10px;
  box-sizing: border-box;
  .suit-item{
    margin-right: 10px;
    width: 100px;
    img{
      width: 100px;
      height: 100px;
    }
    p{
      white-space: normal;
      word-break: break-word;
      font-size: 14px;
      text-align: left;
      margin-top:5px;
    }
    span{
      display: block;
      text-align: left;
      font-size: 14px;
      color: #f23f52;
      margin-top: 5px;
    }
  }
}
.discount{
  background-color: #fff;
  margin-top: 5px;
  h3{
    text-align: center;
    font-size:15px;
    font-weight: 400;
    padding: 15px 0;
  }
  img{
    width: 100%;
  }
}
</style>